<script>
// import {axiosGet} from "@/api";


import echarts from "@/ehcarts/echarts";
import {getShowCharts} from "@/api";
import {showProducts} from "@/api/goodsNews";

export default {

  name: 'indexName',
  data() {
    return {

      // 版本号
      version: "3.8.7",
      showX: [],
      showY: [],
      showStock:[],
      dateForm: {
        time: this.showNowTime()
      },

      stockoption:{}
    };
  },
  mounted() {
    this.getStockCharts();
    this.getSaleToShow();
    this.getCharts();
  },

  methods: {
    showNowTime() {
      let now = new Date();
      let year = now.getFullYear(); //得到年份
      let month = now.getMonth(); //得到月份
      let date = now.getDate(); //得到日期
      month = month + 1;
      let defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
    },
    getSaleToShow() {
      getShowCharts(this.dateForm.time).then((res) => {
        if (res.code == 200) {
          this.showX = res.data.name
          this.showY = res.data.quantity
          this.getCharts();
        }
      })
    },
    getStockCharts() {
      var seriesData=[]
      showProducts().then((res)=>{
        if(res.code==200){
          for(let i=0;i<res.data.length;i++){
            var obj=new Object();
            obj.value=res.data[i].stockQuantity;
            obj.name=res.data[i].name;
            seriesData[i]=obj;
          }
          console.log(seriesData)
          let option = {
            title: {
              text: '商品库存统计',
              subtext: '总计量',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '库存商品',
                type: 'pie',
                radius: '50%',
                data: seriesData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          let stoinCharts = echarts.init(document.getElementById('stoCharts'))
          stoinCharts.setOption(option);
        }
      })



    },

    getCharts() {//模板
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.showX,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '出货数量',
            type: 'bar',
            barWidth: '55%',
            data: this.showY
          }
        ]
      }
      let inCharts = echarts.init(document.getElementById('charts'))
      inCharts.setOption(option);
    }
  }
};
</script>

<template>
  <div class="container">
    <div class="top-tool">
      <div>
        <p>
          描述:包含了业务方面的功能:采购，入库，出库，产品分类管理，产品管理，销售单管理，订单详情管理
        </p>
        <p>
          以及系统方面的功能--可以添加员工，分配角色，分配权限，不同的角色登录系统能操作的菜单是不同的
        </p>
      </div>
    </div>
    <hr>
    <div>
      <h2>月出货数据统计</h2>
    </div>
    <el-divider></el-divider>
    <el-form ref="form" :model="dateForm" style="text-align: left;margin-left: 150px;">
      <el-form-item>
        <el-date-picker
            v-model="dateForm.time"
            type="month"
            placeholder="选择月"
            size="small"
            value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 10px" size="small" @click="getSaleToShow">
          搜索
        </el-button>
      </el-form-item>
    </el-form>
    <div class="outer-div">
      <div id="charts" class="chart-container"></div>
    </div>
    <div class="stock-div">
      <div id="stoCharts"></div>
    </div>
  </div>
</template>

<style scoped>
.container {
  border: 1px solid #E4E7ED;
  border-top: none;

  .top-tool {
    padding: 0px 85px;

    top-tool-p-one {
      font-size: 16px;
      width: 500px;
      margin-left: 30%;
      text-align: left;
      margin-top: 8%
    }
  }
}

#charts {
  width: 500px;
  height: 470px;

}

#stoCharts{
  width: 570px;
  height: 470px;
  top: 50px;
}

.outer-div {
  display: inline-block;
  margin-right: 100px;

}

.stock-div{
  flex-direction: row-reverse;
  display: inline-block;


}

.chart-container {
  width: 80%; /* 设置图表容器的宽度 */
  height: 400px; /* 设置图表容器的高度 */
}


</style>
